<template>
  <view class="container">
    <view class="header">
      <uni-icons type="left" size="23" style="vertical-align: middle" @click="goback"></uni-icons>
      <text style="font-size: 36rpx; font-family: PingFang SC, PingFang SC; font-weight: bold; color: #222222; padding-left: 20rpx">个人资料</text>
    </view>
    <view class="item" @click="chooseuseravatar">
      <view>头像</view>
      <image :src="userinfo.avatar" mode="aspectFill" style="width: 88rpx; height: 88rpx; border-radius: 50rpx"></image>
    </view>
    <view class="item" @click="$refs.name.open()">
      <view>昵称</view>
      <view>
        <text>{{ userinfo.nickname }}</text>
        <uni-icons type="right" size="20"></uni-icons>
      </view>
    </view>
    <view class="item">
      <view>绑定手机号</view>
      <view>{{ userinfo.mobile }}</view>
    </view>
    <!-- 修改名子 -->
    <uni-popup ref="name" type="center">
      <view class="changename">
        <view class="name">昵称</view>
        <input type="text" placeholder="请输入" class="ipt" v-model="userinfo.nickname" />
        <view style="display: flex; margin-left: 35rpx; margin-top: 40rpx">
          <view class="cancelbtn" @click="cacelchangename">取消</view>
          <view class="okbtn" @click="okfn">确认</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      userinfo: {},
      currentname: ''
    };
  },
  onLoad() {
    this.getuserinfo();
  },
  methods: {
    // 取消修改用户昵称
    cacelchangename() {
      this.userinfo.nickname = this.currentname;
      this.$refs.name.close();
    },
    // 获取用户信息
    async getuserinfo() {
      uni.request({
        // url: 'https://health.jiangkukeji.cn/api/user/index', // 测试使用
        url: 'https://www.gansuyiliao.cn/api/user/index', // 正式使用
        method: 'POST',
        header: {
          token: uni.getStorageSync('token')
        },
        success: (res) => {
          console.log('个人信息----', res);
          this.userinfo = res.data.data;
          this.currentname = this.userinfo.nickname;
        }
      });
    },
    // 用户上传头像
    chooseuseravatar() {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image', 'video'],
        sourceType: ['album', 'camera'],
        maxDuration: 30,
        camera: 'back',
        success: (res) => {
          uni.uploadFile({
            // url: 'https://health.jiangkukeji.cn/api/common/upload', //仅为示例，非真实的接口地址
            url: 'https://www.gansuyiliao.cn/api/common/upload', // 正式域名
            filePath: res.tempFiles[0].tempFilePath,
            name: 'file',
            formData: {
              token: uni.getStorageSync('token')
            },
            success: (res) => {
              const data = JSON.parse(res.data);
              console.log('上传后的头像---', data.data);
              uni.$http.post('user/profile', {
                avatar: data.data.url,
                token: uni.getStorageSync('token')
              });
              this.userinfo.avatar = data.data.fullurl;
            }
          });
        }
      });
    },
    // 返回
    goback() {
      uni.navigateBack();
    },
    // 确认名字
    async okfn() {
      if (this.userinfo.nickname.length > 9) {
        uni.showToast({
          title: '昵称的长度不能大于9位',
          icon: 'none'
        });
        return;
      }
      const res = await uni.$http.post('user/profile', {
        nickname: this.userinfo.nickname
      });
      console.log('-----res-----', res.data);
      if (res.data.code == 1) {
        this.getuserinfo();
        this.$refs.name.close();
        uni.showToast({
          title: '修改昵称成功',
          icon: 'none'
        });
      } else {
        uni.showToast({
          title: '修改昵称失败，请检查网络',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .header {
    margin-top: 60rpx;
    margin-left: 30rpx;
  }
  .item {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 750rpx;
    height: 110rpx;
    padding: 36rpx 30rpx 34rpx 40rpx;
    background: #ffffff;
  }
  .changename {
    box-sizing: border-box;
    width: 690rpx;
    height: 400rpx;
    background: #ffffff;
    border-radius: 30rpx 30rpx 30rpx 30rpx;
    padding-top: 30rpx;
    .name {
      font-size: 30rpx;
      text-align: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      color: #000000;
      margin-bottom: 40rpx;
    }
    .ipt {
      box-sizing: border-box;
      padding: 0 30rpx;
      width: 620rpx;
      height: 110rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #e3e3e3;
      margin-left: 35rpx;
    }
    .cancelbtn {
      width: 300rpx;
      height: 90rpx;
      background: #f1f1f1;
      text-align: center;
      line-height: 90rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
    .okbtn {
      width: 300rpx;
      height: 90rpx;
      background: #0278f9;
      text-align: center;
      line-height: 90rpx;
      color: #fff;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
    }
  }
}
</style>
